{block name="content"}
<div class="layui-tab layui-tab-card">
	<div class="layui-tab-content">
		<table id="TablesFieldsTable" data-url="{:sysuri()}" data-target-search="form.form-search"></table>
    </div>
</div>
{/block}

{block name='script'}

<script type="text/html" id="diyToolbar">
	<div class="layui-btn-container">
		<!--{if auth("fields_add")}-->
			<span class="layui-text">
			<button class='layui-btn layui-btn-sm' data-modal='{:url("fields_add")}?table_name={$table_name|default=""}' data-title="[ {$table_name|default=''} ] 添 加 字 段">添加字段</button>
			</span>
		<!--{/if}-->
	
		<!--{if auth("fields_add")}-->
			<span class="layui-text">
			<button class='layui-btn layui-btn-sm layui-btn-primary' data-modal='{:url("fields_sort")}?table_name={$table_name|default=""}' data-title="[ {$table_name|default=''} ] 排 序 字 段">排序字段</button>
			</span>
		<!--{/if}-->
	
		<!--{if auth("fields_batch_add")}-->
			<span class="layui-text">
			<button class='layui-btn layui-btn-sm layui-btn-primary' data-modal='{:url("fields_batch_add")}?table_name={$table_name|default=""}' data-title="[ {$table_name|default=''} ] 批 量 添 加 字 段">批量添加字段</button>
			</span>
		<!--{/if}-->
	</div>
</script>

<script>
    $(function () {
        // 初始化表格组件
        $('#TablesFieldsTable').layTable({
            even: true, height: 'full',
            sort: {field: 'ordinal_position', type: 'desc'},
            where: {table_name: '{$table_name|default=""}'},
			toolbar: '#diyToolbar',
			defaultToolbar: [],
            cols: [[
                {
					field: 'column_name', title: '字段', align: 'center', width: 200, fixed: 'left', templet: function (d) {
						let displayText = ` <input data-value="table_name#{$table_name|default=''};column_name#${d.column_name};key#column_name;value#{value}" data-loading="true" value="${d.column_name}" class="layui-input text-center padding-left-0 fields-name-blur"> `;
						return displayText;
					}
				},
				{
					field: 'column_comment', title: '注释', align: 'center', width: 150, fixed: 'left', templet: function (d) {
						let displayText = ` <input data-loading="true" data-value="table_name#{$table_name|default=''};column_name#${d.column_name};key#column_comment;value#{value}"  data-time="20" value="${d.column_comment}" class="layui-input text-center padding-left-0 fields-name-blur"> `;
						return displayText;
					}
				},
				{
					field: 'column_type', title: '信息', align: 'center', minWidth: 180, templet: function (d) {
						let displayText = ` <div class="help-block" data-modal="{:url('fields_edit')}?table_name=${d.table_name}&name=${d.column_name}" data-title="编辑字段 [ ${d.column_name} ] "> ` ;
						if(d.column_key == 'PRI') displayText += ` <span class="text-center padding-left-0 border-0"> 主键 </span>`;
						if(d.extra == 'auto_increment') displayText += ` <span class="text-center padding-left-0 border-0"> 自增 </span>`;
						displayText += ` <span class="text-center padding-left-0 border-0"> ${d.column_type} </span> `;
						displayText += ` <span class="text-center padding-left-0 border-0"> - 默认值 : ${d.column_default} </span> `;
						displayText += ` <span class="text-center padding-left-0 border-0"> - 为空 : ${d.is_nullable} </span> `;
						displayText += ` </div> ` ;
						return displayText;
					}
				},
				{
					field: 'data_type', title: '类型', align: 'center', width: 650 , fixed: 'right',  templet: '#TablesFieldsDataTypeTpl'
				},
				{if auth("fields_remove")}
				{
					field: 'column_name', title: '操作', align: 'center', width: 50, fixed: 'right', templet: function(d){
						let displayText = ` `;
						if(d.ordinal_position > 1) displayText += ` <span class="text-center padding-left-0 border-0" data-action="{:url('fields_remove')}" data-value="table_name#{$table_name|default=''};column_name#${d.column_name}" data-confirm="删除后无法恢复，请再次确定要删除该字段吗?"> <i class="layui-icon layui-icon-delete"></i> </span>`;
						if(d.ordinal_position == 1) displayText += ` <span class="text-center padding-left-0 border-0"> <i class="layui-icon layui-icon-lock"></i> </span>`;
						return displayText;
					}
				}
				{/if}
			]]
        });
		
		// 监听 blur 事件
		$(document).on('blur', '.fields-name-blur', function () {
		    update(this);
		});

		// 数据自动更新
		function update(self) {
			var data = {};
			var $self = $(self);

			// 解析 data-value
			var dataValue = $self.attr('data-value');
			if (dataValue) {
				dataValue.split(';').forEach(function (item) {
					var parts = item.split('#');
					data[parts[0]] = parts[1];
				});
			}

			// 更新 value
			data.value = $self.val() || $self.attr('value');

			// 显示加载提示
			layer.tips('<p class="color-blue"><i class="fa fa-spinner fa-spin"></i> 更新数据...</p>', $self, {tips: [1, '#FFF']});

			// 发送请求
			$.post("{:url('fields_update')}", data, function (ret) {
				if (ret.code === 0) {
					// 更新失败
					return layer.tips('<p class="color-red"><i class="fa fa-spinner fa-spin"></i> ' +ret.info+ '</p>', $(self), {tips: [1, '#FFF']}), false;
				} else {
					// 更新表格
					$('#TablesFieldsTable').trigger('reload')
					// 更新成功
					return layer.tips('<p class="color-green"><i class="fa fa-spinner fa-spin"></i> 更新成功</p>', $self, {tips: [1, '#FFF']}), false;
				}
			});
		}
    });

</script>

<!-- 数据操作工具条模板 -->
<script type="text/html" id="TablesFieldsDataTypeTpl">
    {{#
		var dataTypes = ['tinyint', 'int', 'bigint', 'varchar', 'date', 'timestamp', 'datetime', 'decimal', 'text'];
		for (var i = 0; i < dataTypes.length; i++) {
			var type = dataTypes[i];
			if (d.data_type === type) {
	}}
		<a data-name="data_type" data-action="{:url('fields_update')}" data-value="table_name#{$table_name|default=''};column_name#{{d.column_name}};key#data_type;value#{{type}}" class="layui-btn layui-btn-sm layui-btn-active name-click">{{ type }}</a>
	{{# } else { }}
		<a data-name="data_type" data-action="{:url('fields_update')}" data-value="table_name#{$table_name|default=''};column_name#{{d.column_name}};key#data_type;value#{{type}}" class="layui-btn layui-btn-sm layui-btn-primary name-click">{{ type }}</a>
	{{# } }}
	{{# } }}
</script>
{/block}